<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      const arr = [
        { id: "29", pid: "", name: "总裁办" },
        { id: "2c", pid: "", name: "财务部" },
        { id: "2d", pid: "2c", name: "财务核算部" },
        { id: "2f", pid: "2c", name: "薪资管理部" },
        { id: "d2", pid: "", name: "技术部" },
        { id: "d3", pid: "d2", name: "Java研发部" },
      ];
      // pid 为空的 表示i是一级菜单
      // 如果当前元素A的pid 等与 另外一个元素B的id ，就表示B 是 A的父元素
      // 将list平铺结构，转换为树形tree的结构
      function tree(params) {
        // 将所有元素的id 当做一个对象的key， 值作为对象的value
        const obj = {};
        params.forEach((item) => {
          // 下面这句话是说将 一级菜单，都加上一个children属性，后面再里面放置二级菜单
          if (!item.pid) {
            item.children = [];
          }
          // 下面这句话是说，将数组结构转换为，对象的形式，id当做key，item值当做value
          // 构建了obj对象以后， 后面再转换数据结构的时候，方便我们去查找元素，比数组方便
          obj[item.id] = item;
        });
        // console.log(obj);
        const newArr = [];
        // 代码里面写了2个forEach， 不能合并，每个forEach的作用不一样
        params.forEach((item) => {
          const parent = obj[item.pid];
          if (parent) {
            parent.children.push(item);
          } else {
            newArr.push(item);
          }
        });
        console.log(newArr);
      }
      tree(arr);
    </script>
  </body>
</html>
